<template>
    <div id="shopping">
        <PageTitle>购物车</PageTitle>
        <div v-if="shoppingCartShow">
            <div class="redact" @click="isRedactClick">编辑</div>
            <div class="pages-tops pages-scrolls">
                <div id="cart-goods">
                    <div class="cart-list" v-for="(s,i) in shoppingCart" :key="i">
                        <p @click="isCheckClick(i)"><img class="list-checked" :src="s.check?'../../static/img/cart-checked.png':'../../static/img/cart-check.png'"></p>
                        <router-link :to="'/goods/Product/'+s.goods._id"><img class="list-img" :src="s.goods.goodsImg[0]" alt=""></router-link>
                        <div class="list-content">
                            <router-link :to="'/goods/Product/'+s.goods._id"><h4>{{s.goods.goodsName}}</h4></router-link>
                            <div class="list-content-flex">
                                <span class="price">{{s.goods.price|money}}</span>
                                <div class="count">
                                    <span @click="minCountClick(s.goods._id,i)">-</span><span>{{s.count}}</span><span @click="addCountClick(s.goods._id,i)">+</span> 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="account">
                <p @click="isAllCheckClick"><img class="list-checked" :src="isAllCheck?'../../static/img/cart-checked.png':'../../static/img/cart-check.png'"></p>
                <div class="choose"> <span class="choose-left">已选( {{gross}} )</span> <span v-if="isRedact" class="choose-right">{{total|money}}</span></div>
                <div v-if="isRedact">去结算</div>
                <div v-else :class="{'is-color':checkId.length<=0}" @click="deleteClick">删除</div>
            </div>
        <Loading :show="isLoading"></Loading>
        </div>
        <div v-else class="pages-top no-cart">
            <img class="no-img" src="../../static/img/empty.jpg">
            <div>你的购物车还没商品呦~</div>
            <router-link to="/">去首页逛逛</router-link>
        </div>
        <Tabbar></Tabbar>
    </div>
</template>
<script>
import PageTitle from "../components/PageTitle.vue";
import Tabbar from "../components/Tabbar.vue";
import {mapState} from "vuex";
import {Loading} from "vux";
export default {
    components:{PageTitle,Tabbar,Loading},
    mounted(){
        if(!sessionStorage.userInfo)return location.hash = "/login";
        this.$store.dispatch("requestShoppingCart");
    },
    data(){
        return {
            checkId:[],
            isRedact:true,
            isAllCheck:false,
            isLoading:false,
            total:0,
            gross:0,
        }
    },
    computed:{
        ...mapState([
            "shoppingCartShow",
            "shoppingCart"
        ])
    },
    methods:{
        isRedactClick(){
            this.isRedact =! this.isRedact;
            this.total = 0;
            this.gross = 0;
            this.checkId = [];
            this.shoppingCart.map((e)=>{
                e.check = false;
                this.isAllCheck = false;
            })

        },
        isCheckClick(i){
            if(this.shoppingCart[i].check){
                this.total = this.total - this.shoppingCart[i].goods.price*this.shoppingCart[i].count;
                this.gross = this.gross - this.shoppingCart[i].count;
                this.shoppingCart[i].check = false;
                this.isAllCheck = false;
                var index = this.checkId.indexOf(this.shoppingCart[i]._id);
                if(index!=-1){
                    this.checkId.splice(index,1);
                }
            }else{
                this.total = this.total + this.shoppingCart[i].goods.price*this.shoppingCart[i].count;
                this.gross = this.gross + this.shoppingCart[i].count;
                this.shoppingCart[i].check = true;
                this.checkId.push(this.shoppingCart[i]._id);
                this.isAllCheck =this.shoppingCart.every((e)=>{
                    return e.check;
                });
            }
            this.$forceUpdate();
        },
        isAllCheckClick(){
            this.total = 0;
            this.gross = 0;
            this.checkId = [];
            if(this.isAllCheck){
                this.shoppingCart.map((e)=>{
                    e.check = false;
                    this.isAllCheck = false;
                })
            }else{
                this.shoppingCart.map((e)=>{
                    e.check = true;
                    this.isAllCheck = true;
                    this.checkId.push(e._id);
                    this.total = this.total + e.goods.price*e.count;
                    this.gross = this.gross + e.count;
                })
            }
            
        },
        addCountClick(id,i){
            this.isLoading = true;
            this.$store.dispatch("requestCount",{_id:id,change:true})
            .then(res=>{
                this.isLoading = false;
                this.shoppingCart[i].count++;
                if(this.shoppingCart[i].check){
                    this.total = this.total + this.shoppingCart[i].goods.price;
                    this.gross++;
                }
                
            })
        },
        minCountClick(id,i){
            this.isLoading = true;
            this.$store.dispatch("requestCount",{_id:id,change:false})
            .then(res=>{
                this.isLoading = false;
                if(this.shoppingCart[i].count<=1){
                    this.shoppingCart[i].count =1;
                }else{
                    this.shoppingCart[i].count--;
                    if(this.shoppingCart[i].check){
                        this.total = this.total - this.shoppingCart[i].goods.price;
                        this.gross--;
                    }
                }
            })
        },
        deleteClick(){
            if(!this.checkId.length<=0){
                // console.log(this.checkId);
                this.$store.dispatch("requestRemoveShoppingCart",{checkId:this.checkId});
                this.checkId = [];
                this.total = 0;
                this.gross = 0;
            }
        }
    }
}
</script>
<style scoped>
    #shopping{
        background-color: #F4F4F4;
        height: 100vh;
    }
    .pages-tops{
        margin-top: 24.4vw;
    }
    .pages-scrolls{
        overflow-y: scroll;
        height: calc(100vh - 48.8vw);
    }
    .redact{
        position: fixed;
        right: 2.8vw;
        top: 12.2vw;
        height: 12.2vw;
        line-height: 12.2vw;
        width: 30vw;
        text-align: right;
    }
    .no-img{
        width: 28vw;
    }
    .no-cart{
        margin-top: 48vw;
        text-align: center;
        font-size: 3.92vw;
    }
    .no-cart a{
        display: inline-block;
        margin-top: 14vw;
        border: #ff3600 1px solid;
        padding: 2.8vw 3.92vw;
        border-radius: 6vw;
        color: #ff3600;
    }
    #cart-goods{
        background-color: white;
        /* padding: 0 2.8vw; */
    }
    .cart-list{
        display: flex;
        padding: 2.8vw 0;
        border-bottom: 1px #eee solid;
    }
    p{
        width: 15vw;
        text-align: center;
        line-height: 100%;
        
    }
    .list-checked{
        position: relative;
        width: 5.6vw;
        height: 5.6vw;
        top: 50%;
        transform: translate(0,-50%);
        
    }
    .list-img{
        width: 25vw;
        height: 25vw;
    }
    .list-content{
        padding: 0 2vw;
        width: 60vw;
    }
    h4{
        width: 100%;
        display: -webkit-box;
        overflow : hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        height: 10vw;
        /* display: -moz-box;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical; */
    }
    .list-content-flex{
        margin-top: 6vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price{
        font-size: 3.36vw;
        color: #b0b0b0;
    }
    .count{
        font-size: 3.92vw;
    }
    .count span:nth-of-type(1){
        display: inline-block;
        padding: 1vw 2.8vw;
        border: #EEEEEE 1px solid;
        border-radius: 1vw 0 0 1vw;
        background-color: #F4F4F4;
    }
    .count span:nth-of-type(2){
        display: inline-block;
        padding: 1vw 4.8vw;
        border-top: #EEEEEE 1px solid;
        border-bottom: #EEEEEE 1px solid;
    }
    .count span:nth-of-type(3){
        display: inline-block;
        padding: 1vw 2.8vw;
        border: #EEEEEE 1px solid;
        border-radius:0 1vw 1vw 0;
        background-color: #F4F4F4;
    }
    .account{
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 12.2vw;
        display: flex;
        height: 12.2vw;
        border-top: 1px #eee solid;
        font-size: 3.92vw;
        text-align: center;
        line-height: 12.2vw;

    }
    .account p{
        background-color: white;
    }
    .account div:nth-of-type(1){
        width: 45%;
        height: 100%;
        background-color: white;
    }
    .account div:nth-of-type(2){
        width: 40%;
        height: 100%;
        background-color: #ff3600;
        color: white;
    }
    .choose{
        text-align: left;
    }
    .choose-right{
        margin-left: 5.6vw;
        color: red;
    }
    .is-color{
        background-color: gainsboro !important;
    }
</style>